<template>
	<view>
		<view class="select-type">
			<u-input v-model="dirValue" type="select" :border="true" @click="dirShow = true"/>
		</view>
		
		<view v-for="(item, index) in list" class="item" :key="index" @click="itemClick(item)">
			<u-image width="100%" height="300rpx" :src="wrapResCover(item)"></u-image>
			<view class="teacher-view">
				<view>{{item.staffName}}老师</view>
				<view>{{item.visitorCount === null?0:item.visitorCount}}人</view>
				<view>{{$u.timeFormat(item.created, 'yyyy/mm/dd')}}</view>
			</view>
			
			<view class="title">{{item.title}}</view>
			<view class="description">
				{{item.description}}
			</view>
		</view>
		<u-loadmore v-if="!emptyShow" :status="status" />
		<u-empty class="noContent" v-if="emptyShow" text="暂时没有素材哦～"  mode="list"></u-empty>
		
		<u-select v-model="dirShow" :list="dirList" label-name="title" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import { getDocuments, getDocumentDirs } from '@/api/document.js'
	import pageMixin from '@/mixins/page.js'
	export default {
		mixins: [pageMixin],
		data() {
			return {				
				dirValue: '全部',
				dirIndex: 0,
				dirShow: false,
				dirList: [],
			}
		},
		onLoad() {
			this.getDocumentDir();
		},
		methods: {
			getList(page) {
				let params = {}
				if (this.dirIndex === 0) {
					params = {
						pageNum: page + 1,
						pageSize: 10,
						dirType: 1,
					}
				} else {
					params = {
						dirId: this.dirList[this.dirIndex].id,
						pageNum: page + 1,
						pageSize: 10,
					}
				}
				
				getDocuments(params).then(res => {
					console.log(res);
					this.setData(res);
				})
			},
			
			confirm(res) {
				console.log(res);
				this.dirValue = res[0].label;
				this.dirIndex = res[0].index;
				this.page = -1;
				this.getList(this.page);
			},
		
			itemClick(item) {
				this.$u.route({
					url: 'pages_teach/document/detail-page',
					params: {
						id: item.id
					}
				})
			},
			
			wrapResCover(item) {
				if (item.resType === "1") {
					return item.resURL;
				}
				return item.cover;
			},
			
			onReachBottom() {
				this.loadMore();
			},
			
			getDocumentDir() {
				getDocumentDirs(1, 0, 99).then(res => {
					console.log(res);
					this.dirList = res.data.content;
					this.dirList.unshift({'title':'全部'});
					this.getList(this.page);
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.select-type{
		background-color: #FFFFFF;
		margin: 30rpx;
	}
	
	.item{
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin: $app-page-padding;
		padding: $app-page-padding;
		
		display: flex;
		flex-direction: column;
		
		.teacher-view{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 20rpx;
			color: $app-font-color;
			font-size: 22rpx;
		}
		
		.title{
			margin-top: 10rpx;
			color: $app-font-color;
			font-size: 30rpx;
			font-weight: bold;
		}
		.description{
			margin-top: 10rpx;
			color: $app-font-desc-color;
			font-size: 26rpx;
		}
	}
</style>
